<template>
  <div :id="props.id"></div>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref, watch} from 'vue';
import Vditor from 'vditor';
import './markdown.css';

/**
 * vditor 二次封装
 *
 * 这个组件不依赖于 vue',  '是通过操作 dom 实现的；
 *
 * 注意：
 * 没有预设宽高',  '需要通过样式进行设置；
 * 组件的 tips 有问题',  '已经修改了 css 文件；
 */
interface SeaMarkdown {
    // dom 元素 ID',  '需要相对于全局唯一
    id?: string;
    // 内容
    content?: string;
    // 只读
    readonly?: boolean;
}

const props = withDefaults(defineProps<SeaMarkdown>(), {
    id: 'sea_md', readonly: false, content: ''
})

// 编辑器实例',  '注意不是 Reference 对象
let vditor = null;
// 需要操作的元素实例
let dom = null;

/**
 * 设置值
 * @param content
 */
const setValue = (content) => {
    if(props.readonly){
        Vditor.preview(document.getElementById(props.id), content, {
            speech: {
                enable: false,
            }
        });
    } else {
        vditor.setValue(content);
    }
}

// 监听 props.content 的变化
watch(() => props.content, (val) => {
    setValue(val);
});

// 更加完整的工具栏
const toolbar = [
    'emoji',  'headings',  'bold',  'italic',  'strike',  '|',  'line',  'quote',  'list',  'ordered-list',
    'check' , 'outdent' ,'indent',  'code',  'inline-code',  'insert-after',  'insert-before' ,'undo',
    'redo',  'upload',  'link',  'table',  'record',  'edit-mode',  'both',  'preview',  'fullscreen',
    'outline',  'code-theme',  'content-theme',  'export, devtools',  'info',  'help',  'br'
]

onMounted(() => {
    if(props.readonly){
        dom = document.getElementById(props.id);
        Vditor.preview(dom, props.content, {
            speech: {
                enable: false,
            }
        });
    } else {
        vditor = new Vditor(props.id, {
            // height: '50vh',
            // width: '50vw',
            toolbarConfig: {
                hide: false,
                pin: false
            },
            // 工具栏
            toolbar: [
                'headings', 'table', 'bold', 'code', '|',
                'ordered-list', 'list', '|',
                'insert-before', 'insert-after', '|',
                'undo', 'redo', '|',
                {
                    name: '保存',
                    tip: '保存',
                    icon: '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700206010742" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4033" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M925.248 356.928l-258.176-258.176a64 64 0 0 0-45.248-18.752H144a64 64 0 0 0-64 64v736a64 64 0 0 0 64 64h736a64 64 0 0 0 64-64V402.176a64 64 0 0 0-18.752-45.248zM288 144h192V256H288V144z m448 736H288V736h448v144z m144 0H800V704a32 32 0 0 0-32-32H256a32 32 0 0 0-32 32v176H144v-736H224V288a32 32 0 0 0 32 32h256a32 32 0 0 0 32-32V144h77.824l258.176 258.176V880z" p-id="4034"></path></svg>',
                    click() {
                        const val = vditor.value.getValue()
                        console.log(val);

                        // vditorShow.value = false
                        // vditor.value?.destroy()
                        //   document.getElementById('vditor').innerHTML = ''
                    }
                }
            ],
            // 计数
            counter: {enable: true, type: 'text'},
            // 设置初值
            after: () => {
                if (props.content) {
                    vditor.setValue(props.content);
                }
            }
        });
    }
});

/**
 * 销毁组件
 */
onUnmounted(()=>{
    if(vditor){
        vditor.destroy();

        console.log()
    }
})

</script>